<template>
  <div style="background-color: white">
    <section id="cd-timeline" class="cd-container">
      <div class="cd-timeline-block" v-for="(item,index) in infos"
           :style="{backgroundColor:index%2 === 1?'#fafafa':'white',margin:'10px 0 0 0'}"
           :class="filter(item)">
        <div>
          <span class="date-span">{{item.approveDate !== "" ? item.approveDate : "暂无"}}</span>
        </div>
        <div class="cd-timeline-img">
        </div>
        <div class="cd-timeline-content">
          <p>
            <i class="iconfont icon-people_fill" style="color:rgb(74, 144, 226)"></i>
            审核人员：
            <span>{{item.approveName !== "" ? item.approveName : "暂无"}}</span></p>
          <p>
            <i class="iconfont icon-barrage_fill" style="color:rgb(255, 153, 0)"></i>
            人员代码：
            <span>{{item.approveCode !== "" ? item.approveCode : "暂无"}}</span></p>
          <p>
            <i class="iconfont icon-homepage_fill" style="color:rgb(74, 144, 226)"></i>
            审核机构：
            <span>{{item.approveComcode !== "" ? item.approveComcode : "暂无"}}</span></p>
          <p v-if="index === 0">
            <i class="iconfont icon-brush_fill" style="color:#EA5A49"></i>
            特别约定：
            <span><a style="color:#ffbe00" href="javascript:void(0)" @click="viewDetail(item,1)">点击查看</a></span></p>
          <p v-if="index !== 0">
            <i class="iconfont icon-createtask_fill" style="color:#EA5A49"></i>
            审核详情：
            <span><a style="color:#ffbe00" href="javascript:void(0)" @click="viewDetail(item)">点击查看</a></span></p>
          <p v-if="item.approveReason !== ''">
            <i class="iconfont icon-dynamic_fill" style="color:#EA5A49"></i>
            审核规则：
            <span><a style="color:#ffbe00" href="javascript:void(0)" @click="viewRule(item)">点击查看</a></span>
          </p>
        </div>
      </div>
    </section>
    <x-dialog :show="showModal" class="dialog-demo">
      <p style="background-color: #ffe26d;padding: 8px;">{{isSpecial ? '特别约定' : '审核详情'}}</p>
      <div class="img-box" style="padding: 10px;">
        <div style="height: 50vh;overflow: auto">
          <div class="specialTxt" v-for="(p,index) in currentTxt" :key="index" :class="specialTitle(p)">
            <p v-if="typeof(p) === 'string'">
              {{p}}
            </p>
            <p v-if="typeof(p) === 'object'" v-for="txt in p" :key="txt">
              {{txt}}
            </p>
          </div>
        </div>
      </div>
      <div @click="showModal = false" style="background-color: #ececec">
        <span class="vux-close">
          <i class="iconfont icon-close" style="color:#EA5A49;font-size: 24px"></i>
        </span>
      </div>
    </x-dialog>
    <popup v-model="showPopup">
      <popup-header
        class="batchPopup"
        title="规则列表"
        right-text="关闭"
        @on-click-right="showPopup = false"
        :show-bottom-border="true">
      </popup-header>
      <group gutter="0" label-width="100%!">
        <cell v-for="(i,index) in currentRuleList" :key="i" :title="index+1+' . '+i"></cell>
      </group>
    </popup>
  </div>
</template>
<script>
  import {XDialog, Popup, PopupHeader, Group, Cell} from 'Vux'
  export default {
    components: {
      XDialog,
      Popup,
      PopupHeader,
      Group,
      Cell
    },
    props: {
      infos: Array,
      isWxFlag: Boolean
    },
    data(){
      return {
        showPopup: false,
        currentTxt: "暂无",
        showModal: false,
        isSpecial: true,
        currentRuleList: []
      }
    },
    methods: {
      specialTitle(p){
        if (p === '方案A' || p === '方案B') {
          return 'specialAppointTitle'
        } else {
          return 'commonTxt'
        }
      },
      filter(item){
        let index = null;
        if (item.approveFlag === "通过") {
          index = "cd-success"
        } else if (item.approveFlag === "不通过") {
          index = "cd-error"
        } else {
          index = "cd-ongoing"
        }
        return index
      },
      viewDetail(item, index){
        if (item.approveDetail === '') {
          this.$vux.toast.show({
            text: "暂无信息",
            type: 'text'
          })
        } else {
          this.isSpecial = index === 1 ? true : false;
          let txts = item.approveDetail.split(/\n/g);
          for (let i = 0; i < txts.length; i++) {
            if (txts[i] === "方案A:") {
              txts[i] = "方案A"
            }
            if (txts[i] === "方案B:") {
              txts[i] = "方案B"
            }
            if(txts[i].indexOf('。') >= 0){
              let dtxs = txts[i].split(/。/g);
              txts[i] = dtxs
            }
          }
          console.log(txts)
          this.currentTxt = txts;
          this.showModal = true;
        }
      },
      viewRule(item){
        this.showPopup = true;
        let reason = item.approveReason;
        if (reason !== "" || reason !== null) {
          let lists = reason.split(/。/g);
          lists.splice(lists.length - 1, 1);
          this.currentRuleList = lists
        } else {
          return
        }
      }
    },
    mounted(){
      console.log(this.infos.length)
    }
  }
</script>
<style scoped>
  /* --------------------------------

Primary style

-------------------------------- */
  html * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  *, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }

  body {
    font-size: 100%;
    color: #7f8c97;
    background-color: #e9f0f5;
  }

  img {
    max-width: 100%;
  }

  /* --------------------------------

  Modules - reusable parts of our design

  -------------------------------- */
  .cd-container {
    /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
  }

  .date-span {
    position: absolute;
    margin-left: 0.8rem;
    top: calc(50% - 10px);
    font-size: 12px;
    color: #333;
  }

  .cd-container::after {
    /* clearfix */
    content: '';
    display: table;
    clear: both;
  }

  /* --------------------------------

  Main components

  -------------------------------- */

  #cd-timeline {
    position: relative;
    /*margin: 2em 0;*/
    margin-top: 1em;
  }

  #cd-timeline::before {
    /* this is the vertical line */
    content: '';
    z-index: 1;
    position: absolute;
    top: 0;
    left: 7rem;
    height: 100%;
    width: 1px;
    background: #d7e4ed;
  }

  @media only screen and (min-width: 1170px) {
    #cd-timeline {
      margin-top: 3em;
      margin-bottom: 3em;
    }

    #cd-timeline::before {
      left: 50%;
      margin-left: -2px;
    }
  }

  .cd-timeline-block {
    position: relative;
  }

  .cd-timeline-block:after {
    content: "";
    display: table;
    clear: both;
  }

  .cd-timeline-block:first-child {
    margin-top: 0;
  }

  .cd-timeline-block:last-child {
    margin-bottom: 0;
  }

  @media only screen and (min-width: 1170px) {
    .cd-timeline-block {
      margin: 4em 0;
    }

    .cd-timeline-block:first-child {
      margin-top: 0;
    }

    .cd-timeline-block:last-child {
      margin-bottom: 0;
    }
  }

  .cd-timeline-img {
    position: absolute;
    top: calc(50% - 12px);
    background-color: #ddd;
    z-index: 1;
    left: 6rem;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px white, inset 0 0 0 rgba(0, 0, 0, 0.08), 0 0 0 5px rgba(0, 0, 0, 0.05);
  }

  .cd-timeline-img span {
    font-size: 40px;
    color: white
  }

  .cd-timeline-block.cd-success {
    border-left: 6px solid #00b5ad;
  }

  .cd-timeline-block.cd-ongoing {
    border-left: 6px solid #4a90e2
  }

  .cd-timeline-block.cd-error {
    border-left: 6px solid #ff9900;
  }

  @media only screen and (min-width: 1170px) {
    .cd-timeline-img {
      width: 60px;
      height: 60px;
      left: 50%;
      margin-left: -30px;
      /* Force Hardware Acceleration in WebKit */
      -webkit-transform: translateZ(0);
      -webkit-backface-visibility: hidden;
    }

    .cssanimations .cd-timeline-img.is-hidden {
      visibility: hidden;
    }

    .cssanimations .cd-timeline-img.bounce-in {
      visibility: visible;
      -webkit-animation: cd-bounce-1 0.6s;
      -moz-animation: cd-bounce-1 0.6s;
      animation: cd-bounce-1 0.6s;
    }
  }

  .cd-timeline-content {
    position: relative;
    margin-left: 9rem;
    /*background: white;*/
    /*margin-right: 1rem;*/
    border-radius: 0.25em;
    padding: 0 .3em;
    /*padding: 1em;*/
    /*box-shadow: 0 3px 0 #d7e4ed;*/
  }

  .cd-timeline-content:after {
    content: "";
    display: table;
    clear: both;
  }

  .cd-timeline-content h2 {
    color: #303e49;
  }

  .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    font-size: 14px;
    font-size: 0.8125rem;
  }

  .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
    display: inline-block;
  }

  .cd-date {
    float: right !important;
  }

  .cd-time {
    font-size: 13px;
    font-size: 0.8125rem;
    display: inline-block;
    color: #666;
    padding: .8em 0;
    float: left;
  }

  .cd-timeline-content p {
    color: #666;
    margin: 0;
    line-height: 1.6;
  }

  .cd-timeline-content p span {
    color: #666;
    margin-left: 10px;
  }

  .cd-timeline-content .cd-read-more {
    float: right;
    padding: .8em 1em;
    background: #acb7c0;
    color: white;
    border-radius: 0.25em;
  }

  .no-touch .cd-timeline-content .cd-read-more:hover {
    background-color: #bac4cb;
  }

  a.cd-read-more:hover {
    text-decoration: none;
    background-color: #424242;
  }

  .cd-timeline-content .cd-date {
    float: left;
    padding: .8em 0;
    opacity: .7;
    color: #333;
  }

  .cd-timeline-content::before {
    content: '';
    position: absolute;
    top: 65px;
    right: 100%;
    height: 0;
    width: 0;
    display: none;
    border: 7px solid transparent;
    border-right: 7px solid white;
  }

  @media only screen and (min-width: 768px) {
    .cd-timeline-content h2 {
      font-size: 20px;
      font-size: 1.25rem;
    }

    .cd-timeline-content p {
      font-size: 16px;
      font-size: 1rem;
    }

    .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date {
      font-size: 14px;
      font-size: 0.875rem;
    }
  }

  @media only screen and (min-width: 1170px) {
    .cd-timeline-content {
      margin-left: 0;
      padding: 1.6em;
      width: 45%;
    }

    .cd-timeline-content::before {
      top: 24px;
      left: 100%;
      border-color: transparent;
      border-left-color: white;
    }

    .cd-timeline-content .cd-read-more {
      float: left;
    }

    .cd-timeline-content .cd-date {
      position: absolute;
      width: 100%;
      left: 122%;
      top: 6px;
      font-size: 16px;
      font-size: 1rem;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content {
      float: right;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content::before {
      top: 24px;
      left: auto;
      right: 100%;
      border-color: transparent;
      border-right-color: white;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-read-more {
      float: right;
    }

    .cd-timeline-block:nth-child(even) .cd-timeline-content .cd-date {
      left: auto;
      right: 122%;
      text-align: right;
    }

    .cssanimations .cd-timeline-content.is-hidden {
      visibility: hidden;
    }

    .cssanimations .cd-timeline-content.bounce-in {
      visibility: visible;
      -webkit-animation: cd-bounce-2 0.6s;
      -moz-animation: cd-bounce-2 0.6s;
      animation: cd-bounce-2 0.6s;
    }
  }

  @media only screen and (min-width: 1170px) {
    /* inverse bounce effect on even content blocks */
    .cssanimations .cd-timeline-block:nth-child(even) .cd-timeline-content.bounce-in {
      -webkit-animation: cd-bounce-2-inverse 0.6s;
      -moz-animation: cd-bounce-2-inverse 0.6s;
      animation: cd-bounce-2-inverse 0.6s;
    }
  }

  .icon {
    color: white;
    font-size: 20px;
    line-height: 20px;
    margin-left: 2px;
  }
</style>
